<template>
  <div class="personnel-monitoring">
    <div class="underground-personnel">
      <div class="search-wrap">
        <div>含水层数量</div>
        <div>
          <span class="num">{{personnelList.length}}</span>
          <span class="cam">个</span>
        </div>
      </div>

      <div class="list-content">
        <div
          class="personnel-list"
          :style="{ visibility: !personnelList.length ? 'hidden' : 'visible' }"
        >
          <div
            v-for="(it,index) in personnelList"
            :key="it.id"
            :class="{ item: true, active: currentIndex === index }"
            @click="clickListItem(it,index)"
          >
            <div class="row">
              <div class="name-type">
                <span class="name">{{ it.zdname }}</span>
              </div>
            </div>
            <div class="row last">
              <div class="name-type">
                <span class="name">{{ it.zdlx }}</span>
                <span class="num">{{it.jcvl}}</span>
                <span class="cam">{{it.zdlx === '流量' ? 'm³/h' : 'm'}}</span>
              </div>
              <div class="addr">
                <img src="@/assets/img/excavation/addr.png" />
                <span>{{ it.ddmc }}</span>
              </div>
            </div>
          </div>
        </div>
        <herin-tip :show-tip="!personnelList.length" :type="showTipType" />
      </div>
    </div>
  </div>
</template>

<script>
import HerinTip from '@/components/HerinTip';
export default {
  components: {
    HerinTip
  },
  data() {
    return {
      showTipType: 'empty',
      currentIndex: 0,
      currentItem: null
    };
  },
  props: ['personnelList'],
  watch: {
    personnelList: {
      handler(value) {
        if (value.length > 0 && this.currentItem === null) {
          this.clickListItem(value[0], 0);
        } else {
          const currentIndex = value.findIndex(item => item.zdnum === this.currentItem.zdnum);
          this.clickListItem(this.currentItem, currentIndex);
        }
      },
      deep: true
    }
  },
  mounted() { },
  methods: {
    clickListItem(item, index) {
      this.currentIndex = index;
      this.currentItem = item;
      this.$emit('changeItem', item);
    }
  }
};
</script>

<style lang="scss" scoped>
.herin-container {
  .personnel-monitoring {
    color: $light3Grey;
    // underground-personnel
    .underground-personnel {
      .personnel-title {
        display: flex;
        justify-content: space-between;
        font-size: $auxiliaryText;
        color: $light2Grey;
        height: 0.875rem;
        line-height: 0.875rem;
        .num {
          color: $lightGrey;
        }
      }
      .search-wrap {
        margin: 0 0 .9375rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .num{
          color: #00FDFF;
          font-size: 1rem;
        }
        .cam{
          margin-left: .3125rem;
          color:#8D8D8D;
          font-size: .75rem;
        }
      }
      .list-content {
        position: relative;
        .personnel-list {
          width: calc(100% + 10px);
          padding-right: 0.4375rem;
          height: 24.5rem;
          overflow: auto;
          // margin-top: 0.625rem;
          .item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 3.5rem;
            padding: .625rem .9375rem;
            border-radius: .25rem;
            margin-bottom: .625rem;
            background-color: #1E2F45;
            div {
              cursor: pointer;
            }
            &.active {
              background-color: $itemActiveBg;
            }
            .row {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: $auxiliaryText;
              height: 0.875rem;
              line-height: 0.875rem;
              .name-type {
                .name {
                  color: $light3Grey;
                  font-size: $commonContentText;
                }
                .tag-button {
                  margin-left: .3125rem;
                  display: inline-block;
                  text-align: center;
                  padding: 0 .3125rem;
                  font-size: 0.75rem;
                  height: 1rem;
                  line-height: 1rem;
                }
              }
              .long {
                color: $lightGrey;
                &.alarm {
                  color: $red;
                }
              }
              .addr {
                img {
                  width: 0.75rem;
                  height: 0.75rem;
                  margin-right: 0.25rem;
                  vertical-align: bottom;
                }
              }
              &.last {
                color: $lightGrey;
                .num{
                  margin-left: .625rem;
                  color: #00FDFF;
                  font-size: .75rem;
                }
                .cam{
                  margin-left: .3125rem;
                  color:#8D8D8D;
                  font-size: .75rem;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
